// this is common CSS combinations
@use 'sass:map';
@use 'sass:meta';
@use '../mixins/function.scss' as *;

/**
$colors: (
  'black': #0000,
  'primary': (
    'base': #409eff,
  ),
) => --ml-white: #ffffff; --ml-primary-base: #409eff;
*/
@mixin set-map-var($mapArg) {
  @each $name, $value in $mapArg {
    @if meta.type-of($value)=='map' {
      @each $key, $item in $value {
        #{getCssVarName($name, $key)}: $item;
      }
    }

    @else {
      #{getCssVarName($name)}: $value;
    }
  }
}

// utils-ellipsis  -> utils-el....
@mixin utils-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 定位居中，默认水平居中，可选择垂直居中，或者水平垂直都居中
@mixin position-center($type: x) {
  position: absolute;

  @if ($type==x) {
    left: 50%;
    transform: translateX(-50%);
  }

  @if ($type==y) {
    top: 50%;
    transform: translateY(-50%);
  }

  @if ($type==xy) {
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}
